<template>
	<div class="select-cover">
		<div v-for="(item, index) in data" :key="index" :class="['cover', item === curCover && 'cur-cover' || '']"
			@click="selectCover(item)">
			<img :src="item" alt="">
			<div class="shadow"></div>
			<i class="iconfont icon-g-dui icon-select"></i>
		</div>
		<!-- <image-upload :oss-token-data="{ moduleType: 'ruiyunV2', publicRead: true }"
			:upload-exceeded-size="uploadExceededSize" :upload-success="uploadSuccess" :max-size="2048" class="img-up">
			<div class="add-cover">
				<i class="iconfont icon-a-tianjiahuodongfengmian1x"></i>
				<p>自定义封面</p>
			</div>
		</image-upload> -->

		<!-- <image-cropper :visible="pickCoverModalVisible" :default-image-path="uploadedImagePath"
			:oss-token-data="{ moduleType: 'ruiyunV2', publicRead: true }" :options="{ fixedNumber: [1, 1] }"
			@cancel="pickCoverModalVisible = false" @select="onPickCoverHander"></image-cropper> -->
		<ImgCropper
			:width="160"
			:height="90"
			@on-before-upload="handleBeforeUpload"
			@on-error="handleError"
			@on-ok="handleOk"
			:limit-file-size="sizeLimit"
		>
			<div class="img-up">
				<div class="add-cover">
					<i class="iconfont icon-a-tianjiahuodongfengmian1x"></i>
					<p class="title">自定义封面</p>
				</div>
			</div>
		</ImgCropper>
	</div>
</template>

<script>
// import ImageCropper from '@/components/image-cropper/image-cropper.vue'
// import ImageUpload from '@/components/ImageUpload.vue'
import { ImgCropper } from '@yanxiu/img-cropper';
import createUploader from '@/lib/uploader-client';
export default {
	components: {
		ImgCropper,
		// ImageCropper,
		// ImageUpload
	},
	props: {
		cur: {
			type: String,
			default: ''
		},
		data: {
			type: Array,
			default: () => []
		},
		sizeLimit: {
			type: Number,
			default: 2*1024*1024
		},
		
	},
	data() {
		return {
			curCover: this.cur || '',
			pickCoverModalVisible: false,
			defaultCovers: '',
			allCovers: [],
			uploadedImagePath: '',
			coverImagePath: '',
			coverImageCropPath: '',
		}
	},
	watch: {
		cur(val) {
			if (val) {
				this.curCover = val
			}
		}
	},
	methods: {
		/**
		 * 文件上传前的钩子函数，用来上传文件，并通过 callback 钩子函数初始化 ImgCropper
		 *
		 * @params file, 要上传的文件对象
		 * @params callback, 初始化 ImgCropper 组件的钩子函数
		 */
		async handleBeforeUpload(file, callback) {
			console.log(file)
			const uploadClient = await createUploader();

			uploadClient.start(file, 'image', {
				onProgress: () => { },
				onSuccess: ({ data }) => {
					callback({
						ispType: data.ispType,
						url: `${data.host}/${data.url}`
					});
				},
				onError: () => {
                 }
			});

		},
		/**
		 * 返回错误信息，Error: { code, message }, 其中 1001 为文件类型错误，1002 为文件大小超出限制
		 */
		handleError(error) { 
			G_dispatchEvent('toast', { message: error.message, type: 'error'})
		},

		/**
		 * 返回裁剪后的图片地址
		 */
		handleOk(result) {
			const coverImageCropPath = result
			let newData = []
			newData.push(coverImageCropPath)
			this.$emit('update:data', this.data.concat(newData))
			this.$emit('select-cover', coverImageCropPath, '')
		},
		selectCover(url) {
			this.$emit('select-cover', url, '')
		},
		uploadExceededSize() {
			// this.$Message.info({
			// 	content: '图片最大2M',
			// 	duration: 2,
			// 	closable: true
			// })
			G_dispatchEvent('toast', { message: '图片最大2M', type: 'error'})
		},
		uploadSuccess(url) {
			this.uploadedImagePath = url
			this.pickCoverModalVisible = true
		},
		onPickCoverHander(data) {
			const coverImagePath = data.originalImagePath
			const coverImageCropPath = data.cropImagePath
			// this.data.push(coverImageCropPath);
			let newData = []
			newData.push(coverImageCropPath)
			this.$emit('update:data', this.data.concat(newData))
			this.$emit('select-cover', coverImageCropPath, '')
			this.pickCoverModalVisible = false
		}
	}
}
</script>

<style lang="scss" scoped>
.select-cover {
	display: flex;
	flex-wrap: wrap;
}

.cover,
img {
	position: relative;
	width: 160px;
	height: 90px;
	margin: 0 20px 20px 0;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;

	&.cur-cover,
	&:hover {

		.shadow,
		.icon-select {
			display: inline-block;
		}
	}
}

.shadow {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 0;
}

.icon-select {
	display: none;
	font-size: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -12px;
	margin-top: -12px;
	z-index: 2;
	color: #fff;
}

.img-up {
	width: 160px;
	height: 90px;
	border-radius: 4px;
	border: 1px solid #cbe7ff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-bottom: 20px;
}

.add-cover {
	text-align: center;
	color: var(--srt-color-primary);
	cursor: pointer;
	.title{
		line-height: 14px;
	}
	.ivu-icon {
		font-size: 24px;
	}
}
</style>